<template>
   <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="银行卡"></myHead>
      <div class="content">
         <div class="empty" v-if="cardList.length<1">
            <img src="../../../static/img/emptyCard.png" alt="">
         </div>

         <div class="item" v-for="(x,y) in cardList">
            <img :src="`${$store.state.imgurlApi}${x.bankimage}`" alt="">
            <div class="cardNum"><p>....&ensp;....&ensp;....&ensp;</p><p>{{x.account.substring(x.account.length-4,)}}</p></div>
         </div>
         <p class="addCard" @click="addCard">添加银行卡</p>
      </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"

    export default {
        name: "extensionBankCard",
        components:{
            myHead
        },
        data(){
            return {
                cardList:[]
            }
        },
        created(){
            window.addEventListener('beforeunload', e => this.beforeunloadFn(e));
            this.$myAxios('index/user/account','post',{
                user_id:this.$myStorage.query(),
                type:0,
            }).then(res=>{
                console.log(res.data);
                if (res.data.state == '1') {
                    this.cardList = res.data.account_list;
                } else {
                    this.$myNotice('请检查网络!',1500);
                }
            });
        },
        methods:{
            addCard(){
                this.$router.push({
                    name:'extensionAddBankCard'
                })
            }
        }
    }
</script>

<style scoped>
   .wrap {
      padding-top: .5rem;
      box-sizing: border-box;
      /*background-color: #F5F5F5;*/
   }
   .content {
      display: flex;
      flex-flow: column;
      align-items: center;
   }
   .empty {
      width: 3.28rem;
      height: 2.55rem;
      margin: .3rem auto .5rem;
   }
   .empty>img {
      width: 100%;
      height: 100%;
   }
   .addCard {
      width:3.41rem;
      height:.5rem;
      box-sizing: border-box;
      background:rgba(255,255,255,1);
      border:.01rem solid rgba(255,111,3,1);
      box-shadow:0 .05rem .15rem 0 rgba(0, 0, 0, 0.05);
      border-radius:.24rem;
      font-size:.15rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FF6F01;
      text-align: center;
      line-height: .5rem;
      margin-top: .1rem;
   }
   .item {
      border-radius: .05rem;
      width: 3.43rem;
      height: 1.12rem;
      margin: .1rem 0;
      position: relative;
   }
   .item>img {
      width: 3.43rem;
      height: 1.12rem;
      position: absolute;
      left: 0;
      top: 0;
   }
   .cardNum {
      font-size:.18rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FFFFFF;
      position: absolute;
      left: .6rem;
      bottom: .15rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .cardNum>p:nth-child(1) {
      line-height: .1rem;
      height: .19rem;
      font-size: .2rem;
   }
</style>
